<template>
  <div
    class="hotzone"
    :style="{
      height: compData.style.height + 'px',
      'border-top-left-radius': compData.data.borderRadiusTop + 'px',
      'border-top-right-radius': compData.data.borderRadiusTop + 'px',
      'border-bottom-left-radius': compData.data.borderRadiusBottom + 'px',
      'border-bottom-right-radius': compData.data.borderRadiusBottom + 'px',
    }"
  >
    <sa-image url="/storage/decorate/20250329/27ab58b59a6e42e9ec331f0e3731be98.png" fit="fill" radius="0" :suffix="null"></sa-image>
    <div
      class="map-item sa-flex sa-row-center"
      v-for="item in compData.data.list"
      :style="{
        width: `${item.width / 2}px`,
        height: `${item.height / 2}px`,
        top: `${item.top / 2}px`,
        left: `${item.left / 2}px`,
      }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .hotzone {
    overflow: hidden;
    position: reactive;
    .sa-image {
      width: 100%;
      min-height: 30px;
    }
    .map-item {
      position: absolute;
      border: 1px solid var(--el-color-primary);
      background: var(--t-bg-active);
      opacity: 0.8;
      color: var(--el-color-primary);
      font-size: 12px;
    }
  }
</style>
